<template>
    <div>
        <el-dialog title="收货信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                
                <el-form-item label="收货人" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                
                <el-form-item label="电话号码" :label-width="formLabelWidth">
                    <el-input v-model="form.mobile" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="收货地址" :label-width="formLabelWidth">
                    <el-select v-model="form.address" placeholder="收货地址">
                        <el-option label="地址一" value="地址1"></el-option>
                        <el-option label="地址二" value="地址2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitDetail">确 定</el-button>
            </div>
        </el-dialog>
        <!--购物车 -->
        <div class="all">

            <div class="cars">
                <table>
                    <tr class="tr1">

                        <td>商品名称</td>
                        <td>价格</td>
                        <td>数量</td>
                        <td>总价</td>
                        <td>操作</td>
                        <td class="checkall">
                            <!-- <input type="checkbox" v-model="flag" @change="test">全选 -->
                            <input type="checkbox" v-model="flag" @change="checkAll">全选
                        </td>
                    </tr>
                    <tr class="tra" v-for="(cart, index) in cartList" :key="cart.cartId">

                        <td>
                            <span><img src="../../assets/images/imgsearch1.jpg"
                                    style="width: 100px;height: 80px; margin-top: -20px; margin-left: 20px;" /></span>
                            <span>{{ cart.productName }}</span>
                        </td>

                        <td style="text-align: center;">￥{{ cart.productPrice }}</td>

                        <td style="text-align: center;">
                            <button @click="changeNum(0, cart, index)" :disabled="cart.cartNum == 0">-</button>
                            <span> {{ cart.cartNum }}</span>
                            <button @click="changeNum(1, cart, index)">+</button>
                        </td>
                        <td style="text-align: center;">￥{{ cart.productPrice * cart.cartNum }}</td>
                        <td style="text-align: center;">
                            <button @click="dele(cart.cartId)" class="btn">删除</button>
                        </td>
                        <td class="ck">
                            <input type="checkbox" v-model="selectedList" :value="cart" @change="checkOne(cart.cartId)">
                        </td>
                    </tr>
                </table>

            </div>
            <div class="carx">
                <p class="carje" style="font-size: 12px;">应付金额:<span style="color: orange;font-weight: bold;">￥{{ sum()
                }}</span>
                    <button class="js" @click="orderDetail">结算</button>
                </p>
            </div>

        </div>

    </div>
</template>
    
<script>
import axios from 'axios';
export default {
    data() {
        return {
        dialogFormVisible: false,
        form: {
          
        },
        formLabelWidth: '120px',
            currentUser: {},
            cartList: [
            ],
            flag: false,
            selectedList: []//存储选中的购物车id
        }
    },
    mounted() {
        this.getCartData()
    },
    created() {
        const token = localStorage.getItem("token");
        if (token != null) {

        } else {
            alert("未登录！请先登录");
            this.$router.push('/login');
        }
    },
    methods: {
        getCartData() {
            axios({
                headers: {
                    'token': localStorage.getItem('token')
                },
                method: "get",
                url: "http://localhost:8085/cart/getCartList",
                data: {}
            }).then(res => {
                console.log(res)
                //1. 获取分类的数据
                this.cartList = res.data.data.data
            })
        },
        dele(cartId) {
            axios({
                headers: {
                    'token': localStorage.getItem('token')
                },
                method: "get",
                url: "http://localhost:8085/cart/deleteCart",
                params: {
                    cartId: cartId
                }
            }).then(res => {
                console.log(res)
                //1. 获取分类的数据
                this.getCartData()
            })
        },
        checkAll() {
            if (this.flag) {
                this.selectedList = this.cartList
            } else {
                this.selectedList = []
            }
        },
        checkOne(val) {
            console.log(val)
            if (this.selectedList.length === this.cartList.length && this.cartList.length !== 0) {
                this.flag = true
            } else {
                this.flag = false
            }
            ;
        },
        sum() {
            var pic = 0
            for (var i = 0; i < this.selectedList.length; i++) {
                pic += this.selectedList[i].cartNum * this.selectedList[i].productPrice
            }
            return pic
        },


        //增加或者减少数量操作
        changeNum(flag, cart, index) {
            if (flag == 0) {
                //减少

                axios({
                    headers: {
                        'token': localStorage.getItem('token')
                    },
                    method: "post",
                    url: "http://localhost:8085/cart/changeCart",
                    data: {
                        "flag": 0,
                        "cartId": cart.cartId
                    }
                }).then(res => {
                    this.getCartData()
                })
            } else {
                axios({
                    headers: {
                        'token': localStorage.getItem('token')
                    },
                    method: "post",
                    url: "http://localhost:8085/cart/changeCart",
                    data: {
                        flag: 1,
                        cartId: cart.cartId
                    }
                }).then(res => {
                    // console.log(res);
                    this.getCartData()
                })
            }
        },
        submitMoney() {
            if (this.selectedList.length > 0) {
                axios({
                    headers: {
                        'token': localStorage.getItem('token')
                    },
                    method: "post",
                    url: "http://localhost:8085/cart/submit",
                    data: {

                        totalAmount: this.sum(),//总金额
                        selectedCartIds: this.selectedList,//所有选中购物车的id
                    }
                }).then(res => {
                    // console.log(res);
                    if (res.data.code == 200) {
                        //将订单id存储到localStorage中

                        localStorage.setItem("oId", res.data.data);
                        this.$router.push('/pay')
                    }
                })
            } else {
                alert("至少选择一条商品")
            }

        },
        orderDetail(){
            this.dialogFormVisible = true;

        },
        submitDetail(){
            if (this.selectedList.length > 0) {
                axios({
                    headers: {
                        'token': localStorage.getItem('token')
                    },
                    method: "post",
                    url: "http://localhost:8085/cart/submit",
                    data: {
                        totalAmount: this.sum(),//总金额
                        selectedCartIds: this.selectedList,//所有选中购物车的id
                        receiverName:this.form.name,
                        receiverMobile:this.form.mobile,
                        receiverAddress:this.form.address,
                        orderRemark:this.form.remark
                    }
                }).then(res => {
                    // console.log(res);
                    if (res.data.code == 200) {
                        //将订单id存储到localStorage中

                        localStorage.setItem("oId", res.data.data);
                        this.$router.push('/pay')
                    }
                })
            } else {
                alert("至少选择一条商品")
            }

        }
    }
}
</script>
    
<style scoped>
.all {
    width: 1300px;
    margin: auto;
    /* border: 1px solid red; */
}

.ck {
    text-align: center;
}

.js {
    color: aliceblue;
    font-weight: bold;
    width: 50px;
    height: 50px;
    background-color: orange;
    border: 1px solid orangered;
    width: 100px;
    height: 48px;
    font-size: 19px;
}

button {
    border: none;
}

.btn {
    color: red
}

.iheader {
    height: 80px;
}

#carbig {
    border: 1px dashed beige;
    width: 1100px;
    /* line-height: 800PX; */
}

table {
    font-size: 12px;
    border: 1px dashed black;
    width: 1200px;
    height: 400px;
    /* text-align: center; */
    border-collapse: collapse;
}

table th {
    /* border: 1px solid black; */
    /* text-align: center; */
}

table th td {
    /* text-align: center; */
    /* border: 1px blue solid; */
}

table tr td {
    /* border: 1px solid black; */
    /* text-align: center; */
}

.checkall {
    margin-right: 10px;
    width: 60px;
}

table tr {
    border: 1px dashed gainsboro;
}

.carx {
    border: 1px dashed gainsboro;
    width: 1200px;
    line-height: 50px;
    margin-top: 10px;
    /*  line-height: 50px; */
}

.all .carx .carje {
    text-align: end;

}

.all .cars .tr1 {
    text-align: center;
    border: 1px dashed gainsboro;
    background-color: gray;
}
</style>
    